<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城 - 22001010819 郑力</title>
    <link rel="stylesheet" href="zhengli.css">
    <link rel="stylesheet" href="./fonts/font_4714490_gx5miy8jpuq/iconfont.css">
<body>
    <!-- 头部标签栏 -->
    <div class="zheng_tabs">
        <span>直播</span>
        <span class="active">商城</span>
    </div>

    <!-- 搜索栏 -->
    <div class="zheng_search_bar">
        <div class="zheng_search">
            <i class="iconfont icon-search"></i>
            <input type="text" placeholder="星骑行服">
        </div>
        <button class="zheng_search_btn">搜索</button>
    </div>

    <!-- 功能菜单 -->
    <div class="zheng_menu_grid">
        <a href="#" class="zheng_menu_item" data-type="order">
            <div class="zheng_menu_icon">
                <i class="iconfont icon-dingdan"></i>
            </div>
            <span>我的订单</span>
        </a>
        <a href="#" class="zheng_menu_item" data-type="cart">
            <div class="zheng_menu_icon">
                <i class="iconfont icon-xiazai1"></i>
            </div>
            <span>购物车</span>
        </a>
        <a href="#" class="zheng_menu_item" data-type="recharge">
            <div class="zheng_menu_icon">
                <i class="iconfont icon-chongzhizhongxin
                "></i>
            </div>
            <span>充值中心</span>
        </a>
        <a href="#" class="zheng_menu_item" data-type="coupon">
            <div class="zheng_menu_icon">
                <i class="iconfont icon-qiajuan"></i>
            </div>
            <span>卡券/红包</span>
        </a>
        <a href="#" class="zheng_menu_item" data-type="market">
            <div class="zheng_menu_icon">
                <i class="iconfont  icon-icon-nav-product"></i>
            </div>
            <span>自营超市</span>
        </a>
    </div>

    <!-- 商品展示区域 -->
    <main class="zheng_main">
        <!-- 超值购区域 -->
        <div class="zheng_section">
            <div class="zheng_section_header">
                <h3>超值购</h3>
                <span class="zheng_tag">大牌补贴</span>
            </div>
            <div class="zheng_product_row">
                <div class="zheng_product_item">
                    <img src="./images/4.jpg" alt="商品">
                    <div class="zheng_price">¥23800</div>
                </div>
                <div class="zheng_product_item">
                    <img src="./images/5.jpg" alt="商品">
                    <div class="zheng_price">¥30999</div>
                </div>
            </div>
        </div>

        <!-- 头条双12区域 -->
        <div class="zheng_section zheng_promotion">
            <div class="zheng_section_header">
                <h3>头条双12 好物直降</h3>
            </div>
            <div class="zheng_promotion_content">
                <div class="zheng_promotion_left">
                    <h4>立减15%起</h4>
                    <p>低价狂欢</p>
                    <button class="zheng_promotion_btn">去抢购</button>
                </div>
                <div class="zheng_promotion_right">
                    <img src="./images/b.jpg" alt="家电补贴">
                    <span class="zheng_tag">家电补贴</span>
                </div>
            </div>
        </div>

        <!-- 直播区域 -->
        <div class="zheng_live_section">
            <div class="zheng_live_grid">
                <div class="zheng_live_card">
                    <div class="zheng_live_cover">
                        <img src="./images/c.jpg" alt="直播封面">
                        <div class="zheng_live_status">直播中</div>
                        <div class="zheng_live_viewers">12</div>
                    </div>
                    <div class="zheng_live_info">
                        <img class="zheng_live_logo" src="./images/c.jpg" alt="店铺logo">
                        <div class="zheng_live_text">
                            <div class="zheng_live_title">NOEO官方旗舰店</div>
                        </div>
                    </div>
                </div>
                <div class="zheng_live_card">
                    <div class="zheng_live_cover">
                        <img src="./images/a.jpg" alt="直播封面">
                        <div class="zheng_live_status">直播中</div>
                        <div class="zheng_live_viewers">176</div>
                    </div>
                    <div class="zheng_live_info">
                        <img class="zheng_live_logo" src="./images/a.jpg" alt="店铺logo">
                        <div class="zheng_live_text">
                            <div class="zheng_live_title">弹动8+minutes官</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 底部导航栏 -->
    <footer class="zheng_footer">
        <nav class="zheng_bottom_nav">
            <a href="index.html" class="zheng_nav_item">
                <i class="iconfont icon-toutiao"></i>
                <span>头条</span>
            </a>
            <a href="video.html" class="zheng_nav_item">
                <i class="iconfont icon-shipin"></i>
                <span>视频</span>
            </a>
            <a href="task.html" class="zheng_nav_item">
                <i class="iconfont icon-daibanrenwu"></i>
                <span>任务</span>
            </a>
            <a href="shop.html" class="zheng_nav_item active">
                <i class="iconfont icon-shangcheng"></i>
                <span>商城</span>
            </a>
            <a href="mine.html" class="zheng_nav_item">
                <i class="iconfont icon-wode"></i>
                <span>我的</span>
            </a>
        </nav>
    </footer>
</body>
</html>